<template>
  <div>
    <!--  左侧-->
    <el-row align="top">
      <el-col :span="8" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log" style="padding-left: 20px;padding-top: 10px">
          <el-form :inline="true" :model="patientData"  class="demo-form-inline" >
            <el-form-item label="身份证号"  prop="card" >
              <el-input v-model="patientData.patientCard" placeholder="患者身份证号码" readonly>

                <el-button slot="append" icon="el-icon-user-solid" @click.native="opendialog"></el-button>

              </el-input>

            </el-form-item>
            <el-form-item label="患者姓名"  prop="name" >
              <el-input v-model="patientData.patientName" placeholder="患者姓名" readonly></el-input>
            </el-form-item>

            <el-form-item label="患者电话"  prop="phone">
              <el-input v-model="patientData.patientPhone" placeholder="患者电话" value="postList.phone" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="patientData.patientSex" disabled>
                <el-radio label="男" ></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker
                v-model="patientData.patientBirth"
                type="date"
                placeholder="选择日期"
                style="width: 207px" readonly="">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="患者年龄" >
              <el-input v-model="patientData.patientAge" placeholder="患者年龄" readonly></el-input>
            </el-form-item>

            <el-form-item label="地址信息" >
              <el-input
                type="textarea"
                placeholder="请输入地址信息"
                v-model="patientData.patientAddress"
                maxlength="30"
                show-word-limit
                style="width: 207px"
                readonly
              ></el-input>
            </el-form-item>


            <el-form-item label="过敏历史" >
              <el-input
                type="textarea"
                placeholder="请输入过敏史"
                v-model="patientData.history"
                maxlength="30"
                show-word-limit
                style="width: 207px"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>


          <el-tabs v-model="seePatient2" type="card" @tab-click="handleClick" stretch="stretch" >
            <el-tab-pane label="患者档案" name="患者档案" class="el-tab" style="text-align: center"></el-tab-pane>
            <el-tab-pane label="历史病例" name="历史病例" style="text-align: center"></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>



      <!--    右侧-->
      <el-col :span="15" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log" style="height: 70px">


        <span>
          <b>挂号单ID:</b><span style="color: red">{{registerid===''?"选择患者后显示":registerid}}</span>
          <b>病例编号:</b><span style="color: blueviolet;font-family: 微软雅黑">{{caseid===''?"保存病例后显示":caseid}}</span>
        </span>


          <div id="butDiv">
            <el-button type="primary" @click="saveHistory" icon="el-icon-download">保存病例</el-button>
            <el-button type="danger" icon="el-icon-check">就诊完成</el-button>
          </div>

        </el-card>
      </el-col>


      <!--    病例-->
      <el-col :span="15" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log" >
          <el-tabs v-model="seePatient3" type="card" @tab-click="handleClick" >
            <el-tab-pane label="病例" name="病例" class="el-tab" >

              <el-form :inline="true"  :model="patientHistoryForm" class="demo-form-inline">

                <el-form-item label="发病日期" prop="date">
                  <el-date-picker
                    v-model="patientHistoryForm.historyDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH：mm:ss"
                    style="width: 170px"
                    placeholder="选择日期"
                    clearable></el-date-picker>
                </el-form-item>


                <el-form-item label="接诊类型">
                  <el-select v-model="patientHistoryForm.historyType" placeholder="类型选择" clearable style="width: 170px">
                    <el-option  label="初诊" value="0"></el-option>
                    <el-option  label="复诊" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="是否传染">
                  <el-select v-model="patientHistoryForm.historyContagion" placeholder="请选择" clearable style="width: 170px">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>

                  </el-select>
                </el-form-item>
              </el-form>



              <el-form :label-position="labelPosition" label-width="80px" v-model="patientHistoryForm">
                <el-form-item label="主诉" >
                  <el-input
                    type="textarea"
                    placeholder="请输入主诉"
                    v-model="patientHistoryForm.historyDiscribe"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>


                <el-form-item label="诊断信息" >
                  <el-input
                    type="textarea"
                    placeholder="请输入诊断信息"
                    v-model="patientHistoryForm.historyDiagnosis"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

                <el-form-item label="医生建议" >
                  <el-input
                    type="textarea"
                    placeholder="请输入医生信息"
                    v-model="patientHistoryForm.historyProposal"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

                <el-form-item label="备注" >
                  <el-input
                    type="textarea"
                    placeholder="请输入备注信息"
                    v-model="patientHistoryForm.historyRemark"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

              </el-form>

              <!--处方-->
            </el-tab-pane>
            <el-tab-pane label="处方" name="处方">

              <el-button type="success" icon="el-icon-plus" @click="openMecinePrecribe">添加药用处方</el-button>

              <el-button type="success" icon="el-icon-plus" @click="openPrescribe">添加检查处方</el-button>

            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>

    <!--  选择挂号患者-->
    <el-dialog title="选择挂号患者" :visible.sync="dialog"  >
      <el-tabs v-model="seePatient1" type="card" stretch="stretch">
        <el-tab-pane label="待就诊列表" name="待就诊列表">
          <el-table
            :data="PatientData1"
            border
            style="width: 100%">
            <el-table-column
              prop="doctorPatient.patientName"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              prop="registerId"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              prop="doctorRegistraFee.registraName"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row)">接诊</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="就诊中列表" name="就诊中列表">
          <el-table
            :data="PatientData2"
            border
            style="width: 100%">
            <el-table-column
              width="181.7"
              prop="doctorPatient.patientName"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              width="181.7"
              prop="registerId"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              width="181.7"
              prop="doctorRegistraFee.registraName"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              width="181.7"
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row)">就诊中</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>


        <el-tab-pane label="就诊完成列表" name="就诊完成列表">
          <el-table
            :data="PatientData3"
            border
            style="width: 100%">
            <el-table-column
              width="181"
              prop="doctorPatient.patientName"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              width="182"
              prop="registerId"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              width="182"
              prop="doctorRegistraFee.registraName"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              width="182"
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row)">完成</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!--  历史病例展示-->
    <el-dialog  title="病例展示" :visible.sync="historyill">
      <div slot="title">
        <h1 align="center" style="color: indigo">{{patientName}}</h1>
      </div>
      <el-table v-loading="loading" :data="historyList">
        <el-table-column label="发病日期" align="center" prop="historyDate" />
        <el-table-column label="接诊类型" align="center" prop="historyType" >
          <template slot-scope="scope">
            <span>{{ scope.row.history_type===0?"初诊":"复诊" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否传染" align="center" prop="historyContagion" >
          <template slot-scope="scope">
            <span>{{ scope.row.history_contagion===0?"不传染":"传染" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主诉" align="center" prop="historyDiscribe" />
        <el-table-column label="诊断信息" align="center" prop="historyDiagnosis" />
        <el-table-column label="医生建议" align="center" prop="historyProposal" />
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>

     <!--这是分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="historyQuery.pageNum"
        :limit.sync="historyQuery.pageSize"
        @pagination="getHistoryList"
      />
    </el-dialog>


    <!--添加检查处方-->
    <el-dialog  title="病例展示" :visible.sync="check_prescribe">
      <div slot="title">
        <h1 align="center" style="color: darkblue">添加【检查】处方</h1>
      </div>
      <span style="float: left"><el-button type="success" icon="el-icon-plus">确认添加</el-button></span>
      <span style="float: right">检查处方金额¥</span>
      <el-table :data="check_prescribeList">
        <el-table-column label="序号" align="center" prop="history_date" />
        <el-table-column label="项目名称" align="center" prop="history_type"/>
        <el-table-column label="单位" align="center" prop="history_contagion"/>
        <el-table-column label="单价(元)" align="center" prop="history_discribe" />
        <el-table-column label="金额(元)" align="center" prop="history_diagnosis" />
        <el-table-column label="检查备注" align="center" prop="history_proposal" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="success" @click="addDept(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div align="center"><el-button type="primary" icon="el-icon-plus" @click="openCheckChu">添加检查项</el-button></div>
    </el-dialog>


    <!-- 添加药用处方-->
    <el-dialog  title="病例展示" :visible.sync="medicine_prescribe">
      <div slot="title">
        <h1 align="center" style="color: darkblue">添加【药用】处方</h1>
      </div>
      <span style="float: left"><el-button type="success" icon="el-icon-plus">确认添加</el-button></span>
      <span style="float: right">药用处方金额¥</span>
      <el-table :data="medicine_prescribeList">
        <el-table-column label="序号" align="center" prop="history_date" />
        <el-table-column label="药品名称" align="center" prop="history_type"/>
        <el-table-column label="数量" align="center" prop="history_contagion"/>
        <el-table-column label="单价(元)" align="center" prop="history_discribe" />
        <el-table-column label="金额(元)" align="center" prop="history_diagnosis" />
        <el-table-column label="复用备注" align="center" prop="history_proposal" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="success" @click="addDept(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div align="center"><el-button type="primary" icon="el-icon-plus" @click="openMedcineChu">添加药用处方项</el-button></div>
    </el-dialog>


    <!--抽屉-->
    <!--药用抽屉-->
    <el-drawer
      title="我是标题"
      :visible.sync="medicine_drawer"
      :direction="direction">
      <div slot="title"><h1 align="center" style="font-family: 黑体">药品列表</h1></div>
      <el-form :model="DrugqueryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="药品名称" prop="postCode">
          <el-input
            v-model="DrugqueryParams.durgName"
            placeholder="请输入药品名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryMedicine">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryMedicine">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="Medicine_List"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selectDrug"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="durgId" label="药品ID" width="120" align="center"></el-table-column>
        <el-table-column prop="durgName" label="药品名称" width="120" align="center"></el-table-column>
        <el-table-column prop="durgNumber" label="库存量" width="120" align="center"></el-table-column>
        <el-table-column prop="durgUnit" label="单位" width="120" align="center"></el-table-column>
      </el-table>

    </el-drawer>

    <!--检查抽屉-->
    <el-drawer
      title="我是标题"
      :visible.sync="check_drawer"
      :direction="direction">
      <div slot="title"><h1 align="center" style="font-family: 黑体">检查列表</h1></div>
      <el-form :model="CheckqueryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键字" prop="postCode">
          <el-input
            v-model="CheckqueryParams.postCode"
            placeholder="请输入关键字"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryCheck">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryCheck">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="Check_List"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="项目费用ID"
          width="120">
          <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="name"
          label="项目名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="关键字"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="项目单价"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="单位"
        >
        </el-table-column>
      </el-table>
    </el-drawer>



  </div>
</template>

<script>
    import { getRegisterListByStatus,treatPatient,addPatientHistory ,getHistoryByPatientId} from "@/api/doctor/diag";
    import { getPatientById } from "@/api/doctor/patient";
    import { getAllDrugs } from "@/api/doctor/patientdrug";
    import { listDurg } from "@/api/drug/drug";


    export default {
        name: "index",
        data() {
            return {

                labelPosition: 'left',//表单位置

                dialog: false,//挂号单展示标志符

                historyill:false,


                seePatient1: '待就诊列表',//挂号者首选项
                seePatient2: '患者档案',//挂号者首选项
                seePatient3: '病例',//挂号者首选项

                PatientData1: {},//待就诊列表

                PatientData2: {},//就诊中列表

                PatientData3: {},//就诊完成列表

                patientData: {},//患者个人信息

                historyList: {},//历史病例表

                total: 0,//总页数

                loading: true,//加载罩

                stretch: true,//是否伸展标签页

                Medicine_List: {},//药用表


                Check_List: {},//检查项目表

                // 显示搜索条件
                showSearch: true,
                //传参
                historyQuery: {
                    pageNum: 1,
                    pageSize: 10

                },//历史病例查询参数

                check_prescribe: false,//检查处方标志符
                check_prescribeList: {},//检查处方集合
                medicine_prescribe: false,//药用处方标志符
                medicine_prescribeList: {},//药用处方集合

                direction: 'rtl',//抽屉方向
                medicine_drawer: false,//药用抽屉
                check_drawer: false,//检查抽屉
                DrugqueryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    durgName: null,
                    durgCode: null,
                    durgProducer: null,
                    durgType: null,
                    durgOtcType: null,
                    durgUnit: null,
                    durgOtcPrice: null,
                    durgNumber: null,
                    durgNumberMin: null,
                    durgConvert: null,
                    durgStatus: null,
                },//药品条件搜索
                CheckqueryParams: {},//检查条件搜索

                patientHistoryForm: {},//新增病例数据1

                caseid: '',//添加后的病例id
                registerid: '',//挂号单id
                patientName: '',//患者姓名


            }
        },
        methods: {
            //选择药品处方 selection选中的行 row当前行
            selectDrug(selection, row){
              alert(selection.length+"    "+row.durgId)

            },

            //这是患者信息和历史病历选项卡点击事件
            handleClick(tab, event) {
                if (tab.name==='历史病例'){
                    this.getHistoryList();
                    this.historyill=true;//是否显示弹出框
                }
            },

            //获得历史病例函数
            getHistoryList(){
                this.loading=true;//打开遮罩
                getHistoryByPatientId(this.historyQuery).then(res=>{
                    this.historyList=res.rows;
                    this.total=res.total;
                    this.loading=false;//关闭遮罩
                })
            },


            opendialog(){

                this.dialog=true;
                //查询待就诊1
                getRegisterListByStatus(1).then(res=>{
                    //ajax返回的是data
                    this.PatientData1=res.data
                })
                //查询就诊中2
                getRegisterListByStatus(2).then(res=>{
                    this.PatientData2=res.data
                })
                //查询就诊完成3
                getRegisterListByStatus(3).then(res=>{
                    this.PatientData3=res.data
                })

            },

            //患者数据回显，点击接诊触发,参数是一个完整的挂号对象
            putPatient(data){
                this.registerid=data.registerId;//挂号单id
                //根据患者主键查询患者信息并回显
                getPatientById(data.doctorPatient.patientId).then(res=>{
                    //患者个人信息
                    //data是病历对象
                    this.patientData=res.data;
                    this.historyQuery.historyPatientId=res.data.patientId;//病例查询id加载患者主键
                    this.historyQuery.historyPatientId=res.data.patientId;//病例查询id加载
                    this.registerid=res.patientId;//挂号单id
                    this.patientName=res.data.patientName;//患者姓名赋值
                    this.patientName=this.patientName+'的病例展示';
                    this.dialog=false;
                    this.remind("患者数据加载成功");
                })
                //更新当前挂号状态，从待就诊--》就诊中
                if (data.registerStatus=="1"){
                    treatPatient(data.registerId)
                }
            },

            //保存病例
            saveHistory(){

                this.patientHistoryForm.historyPatientId=this.historyQuery.historyPatientId
                addPatientHistory(this.patientHistoryForm).then(res=>{

                    if (res.code===200){//成功
                        this.caseid=res.data.historyNumber;//病例编号
                        this.remind("添加病例成功");
                    }else {
                        this.msgError("添加病例失败");
                    }

                })
            },

            //提示框
            remind(msg){

                this.$message({
                    message: msg,
                    type: 'success'
                });

            },




            //打开检查处方
            openPrescribe(){

                this.check_prescribe=true;

            },

            //打开药用处方
            openMecinePrecribe(){

                this.medicine_prescribe=true;

            },


            //打开药用抽屉
            openMedcineChu(){
                //查询所有药品Medicine_List
                listDurg(this.DrugqueryParams).then(resp=>{
                    this.Medicine_List=resp.rows;
                    this.total=resp.total;
                })
                this.medicine_drawer=true;

            },

            openCheckChu(){

                this.check_drawer=true;

            },

            //药品条件搜索
            handleQueryMedicine(){
                //this.DrugqueryParams.pageNum = 1;
                this.openMedcineChu();
            },

            /** 药品重置按钮操作 */
            resetQueryMedicine() {
                this.resetForm("queryForm");
                this.handleQueryMedicine();
            },


            //检查条件搜索
            handleQueryCheck(){


            },

            /** 检查重置按钮操作 */
            resetQueryCheck() {
                this.resetForm("queryForm");
                this.handleQueryMedicine();
            },
        }
    }
</script>

<style scoped>
  .el-tab{

    /*width: 400px;*/
    /*text-align: center;*/

  }
  #butDiv{

    float: right;
    /*position: absolute;*/
    /*top: 10px;*/


  }

</style>
